<template>
	<view class="whole-page">
		<view v-for="(item, index) in lists" :key="index" :class="['item', item.type === 'column' && 'item-act']">
			<image :src="item.img" mode="aspectFit" class="item-l"></image>
			<view class="item-r">
				<text class="r-tit">{{item.title}}</text>
				<text class="r-text">{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			info: Object,
			sInfo: Object,
			eInfo: Object
		},
		computed: {
			lists() {
				return  [
					{img: '../static/icon12.png', title: '行车时长', text: this.info.move_long},
					{img: '../static/icon13.png', title: '最高时速', text: `${this.info.max_speed}km/h`},
					{img: '../static/icon14.png', title: '停车时长', text: this.info.stop_long},
					{img: '../static/icon15.png', title: '平均速度', text: `${this.info.avg_speed}km/h`},
					{img: '../static/icon16.png', title: '行驶里程', text: `${this.info.mile}公里`},
					{img: '../static/icon17.png', title: '定位点数量', text: `${this.info.gps_size}条`},
					{img: '../static/icon18.png', type: 'column', title: `开始：${this.sInfo.time}`, text: this.sInfo.addr},
					{img: '../static/icon19.png', type: 'column', title: `结束：${this.eInfo.time}`, text: this.eInfo.addr}
				]
			}
		}
	}
</script>

<style scoped>
	.item{
		display: flex;
		align-items: center;
		padding: 0 36rpx;
		background: #fff;
		font-size: 30rpx;
	}
	.item:nth-child(1), .item:nth-child(7){
		margin-top: 14rpx;
	}
	.item-act{
		align-items: flex-start;
		padding-top: 34rpx;
	}
	.item-l{
		width: 40rpx;
		height: 38rpx;
		margin-right: 36rpx;
	}
	.item-r{
		flex: 1;
		padding: 34rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #E9E9E9;
	}
	.item-act .item-r{
		padding-top: 0;
		flex-direction: column;
		align-items: flex-start;
	}
	.r-tit{
		color: #333333;
	}
	.item-act .r-tit{
		margin-bottom: 34rpx;
	}
	.r-text{
		color: #999999;
	}
</style>
